<template>
  <div class="orderPlatFormContainer">
    <div class="main-containerText">
<!--      <split-vertical title="非平台订单"></split-vertical>-->
      <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div v-if="showCondition">
          <el-row>
            <el-col :span="6">
              <el-form-item label="开始时间">
                <el-date-picker
                  size="medium"
                  v-model="ruleForm.startDate"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="选择时间">
                </el-date-picker>
              </el-form-item>
            </el-col>

          <el-col :span="6">
            <el-form-item label="结束时间">
              <el-date-picker
                size="medium"
                v-model="ruleForm.endDate"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单时间">
              <el-date-picker
                size="medium"
                v-model="ruleForm.orderTime"
                type="date"
                format="yyyy-MM-dd "
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单状态">
              <el-select v-model="ruleForm.orderStatus" placeholder="请选择"  size="medium" filterable allow-create clearable>
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单分类">
              <el-select v-model="ruleForm.orderType" placeholder="请选择"  size="medium" filterable allow-create clearable>
                <el-option
                  v-for="item in orderTypeData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="ruleForm.receiverName" size="medium" placeholder="请输入姓名" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="联系方式">
              <el-input v-model="ruleForm.receiverPhone"  size="medium" placeholder="请输入联系方式" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input type="text" placeholder="请输入订单编号" v-model="ruleForm.orderCode"  size="medium"  clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item style="width: 100%;text-align: center">
          <el-button type="primary" @click="query"  size="small" style="margin-left:10px">查询</el-button>
          <el-button  @click="reset" plain  size="small">重置</el-button>
          <span @click="setSearch" style="color:#3c8dbc;margin-left:20px;cursor: pointer"><i class="iconfont">&#xe620;</i>{{condition}}</span>
        </el-form-item>
      </el-form>
    </div>
    <div class="stand" style="padding: 10px 0">
      <div class="selectDate">
          <el-upload
            class="upload-demo"
            action="/api/erp/v1/internal/order/delivery/upload"
            :on-success="onSuccess"
            :on-error="onError"
            :data={userId:this.userId}
            :limit="3"
            :before-upload="beforeUpload"
            accept=".xls,.xlsx"
          >
            <el-tooltip class="item" effect="dark" content="发货单导入" placement="top-start">
              <el-button size="small" type="primary" icon="el-icon-upload"></el-button>
            </el-tooltip>
          </el-upload>
          <el-tooltip class="item" effect="dark" content="新增" placement="top-start">
            <el-button size="small" type="primary" @click="addOrder" icon="el-icon-plus"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="发货单导出" placement="top-start">
            <el-button @click="exportInvoices"  size="small" type="warning" icon="el-icon-upload2"></el-button>
          </el-tooltip>
      </div>
      <div class="orderTable">
        <el-table
          :data="nonPlatformList"
          :header-cell-style="getRowClass"
          highlight-current-row
          style="width: 100%"
          @cell-dblclick="celldblclick">
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderCode"
            label="订单编号">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderTime"
            label="订单时间" >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderType"
            label="订单分类"
            width="80" >
            <template slot-scope="scope">
              <p>{{scope.row.orderType | orderType}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="receiverName"
            label="收件人姓名"
            width="95"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="receiverPhone"
            label="联系方式"
            width="115">
          </el-table-column>
          <el-table-column
            prop="receiverAddress"
            label="地址"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="orderMoney"
            label="订单金额"
            width="80" >
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="orderStatus"
            label="订单状态"
            width="80" >
            <template slot-scope="scope">
              <p>{{scope.row.orderStatus | orderStatus}}</p>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="expressType"
            label="快递方式"
            width="80" >
            <template slot-scope="scope">
              <p>{{scope.row.expressType | expressType}}</p>
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="expressCode"
            label="快递单号" >
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text"   @click="look(scope.row.id)"><span>查看</span></el-button>
              <el-button type="text"   size="mini" @click="del(scope.row.id)"><span>删除</span></el-button>
              <el-button type="text"    size="mini" @click="conFirmReceipt(scope.row.id)"  v-if="scope.row.orderStatus == 'B'"><span>确认收货</span></el-button>
              <el-button type="text"  size="mini" @click="deilveryGoods(scope.row)" v-if="scope.row.orderStatus == 'A'"><span>发货</span></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
<!--      <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>-->
    </div>
    <div class="pagination">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount">
        </el-pagination>
      </div>
    </div>
    <!--    发货-->
    <express-methods v-if="isDelivery" :expressMods="expressMods" @close="close"></express-methods>
    <!-- 订单导入 -->
    <import-invoice v-if="isShowOrder" :num="num" :failNum="failNum" :failOrders="failOrders"  @closeTip="closeTip"></import-invoice>
    <!-- 发货单弹框 -->
    <import-bill v-if="isShowBill" :number="number" :failNumber="failNumber" :failDeliveryOrders="failDeliveryOrders"  @closeTip="closeTip"></import-bill>
  </div>
</template>
<script>
  import SplitVertical from "components/common/SplitVertical"
  import api from 'js/service'
  import axios from 'axios'
  import {localStorage} from 'js/localStorage'
  import { Loading } from 'element-ui';
  import importInvoice from 'components/base/OrderQuery/Importinvoice.vue'
  import importBill from 'components/base/OrderQuery/ImportBill.vue'
  import VTable from "components/common/PageTable/VTable"
  import expressMethods from "components/base/platformOrder/expressMethods"
  export default {
    inject:['reload'],
    components:{
      VTable
    },
    data(){
      return {
        //v-model
        condition:"高级搜索",
        showCondition:false,
        ruleForm:{
          startDate: '',
          endDate: '',
          orderCode: '',
          orderTime: '',
          orderStatus: '',
          receiverName: '',
          receiverPhone: '',
          orderType:'',
        },

        //页码
        pageCount: 0,
        pageIndex: 1,
        pageSize: 10,
        expressMods:{},
        options: [
          {value: "A", label: '待发货'},
          {value: "B", label: '已发货'},
          {value: "C", label: '已完成'}
        ],
        value: '',
        failNum: "",
        num: "",
        failOrders: [],
        isShowOrder: false,
        isShowBill: false,
        isDelivery:false,
        failNumber: '',
        number: '',
        failDeliveryOrders: [],
        nonPlatformList:[],
        orderTypeData:[
          {
            value:"A",
            label:"活动订单"
          },{
          value:"B",
          label:"内部购买"
        },{
          value:'C',
          label:"正常订单"
        },{
          value:'D',
          label:'集采订单'
        },{
          value:"E",
          value:"质检订单"
        },{
          value:'F',
          label:"自提订单"
        }],
        tableParams:{
          dataArray:[],
          showMultiSelection:false,
          columnArray:[
            {label: '订单编号', prop: 'orderCode',  sortable: false},
            {label: '订单时间', prop: 'orderTime',  sortable: false},
            {label: '订单分类', prop: 'orderType',  sortable: false},
            {label: '收件人姓名', prop: 'receiverName',sortable: false},
            {label: '联系方式', prop: 'receiverPhone',sortable: false},
            {label: '地址', prop: 'receiverAddress',sortable: false},
            {label: '订单金额', prop: 'orderMoney',sortable: false},
            {label: '订单状态', prop: 'orderStatus',sortable: false},
            {label: '快递方式', prop: 'expressType',sortable: false},
            {label: '快递单号', prop: 'expressCode',sortable: false},

          ],
          rowHandle:{
            view:{
              show:false
            },
            update:{
              show:false
            }
          }
        },
      }
    },
    filters:{
      orderType(val){
        switch(val){
          case 'A':return '活动订单';break;
          case "B":return '内部购买';break;
          case "C":return '正常订单';break;
          case "D":return '集采订单';break;
          case "E":return '质检订单';break;
          case "F":return '自提订单';break;
        }
      },
      orderStatus(val){
        switch(val){
          case "A":return '待发货';break;
          case "B":return '已发货';break;
          case "C":return '已完成';break;
        }
      },
      expressType(val){
        switch(val){
          case "X":return '无';break;
          case "A":return '邮政快递';break;
          case "B":return '顺丰快递';break;
          case "C":return '百世快递';break;
          case "D":return '货拉拉';break;
        }
      }
    },
    created(){
      this.init()
    },
    methods:{
      init(){
        this.userId=localStorage.get('userID')
        this.query()
      },
      onSuccess(response, file, fileList){
        if(response.code === "OK"){
          this.isShowBill=true
          this.failNumber=response.data.failNum
          this.pageCount=response.pageCount
          this.number=response.data.number
          this.failDeliveryOrders=response.data.entities
        }else{
          this.$message.warning(response.msg)
        }

      },
      onError(err, file, fileList){
        // console.log(err, file, fileList,"ddd")
      },
      beforeUpload(file){
            // console.log(file,"$$$$$$$$$$$$")
      },

      setSearch(){
        if( this.condition == "高级搜索"){
          this.showCondition=true;
          this.condition='简单搜索'
        }else{
          this.showCondition=false;
          this.condition='高级搜索'
        }
      },
      //实现双击复制
      celldblclick (row, column, cell, event) {
        var _this=this
        this.$copyText(row[column.property]).then(function (e) {
          _this.$message.success("复制成功")
        }, function (e) {

        })
      },
      //发货
      deilveryGoods(row){
        this.expressMods=row
        this.isDelivery=true
      },
      //设置表格第一行的颜色
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex == 0) {
          return 'background:#fafafa;color:rgba(0, 0, 0, 0.85)'
        } else {
          return ''
        }
      },
      //创建
      addOrder(){
        this.$router.push({
          path:"/platform-order-add"
        })
      },
      closeTip(){
        this.isShowOrder=false
        this.reload()
        this.isShowBill=false
        this.reload()
      },
      close(){
        this.isDelivery=false
      },
      look(id){
        this.$router.push({
          path:'/platform-order-look',
          query:{
            id:id
          }
        })
      },
      conFirmReceipt(id){
        this.$confirm('确认收货, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parm={
            id:id
          }
          let succ=data=>{
            if(data.code=="OK"){
              this.$message.success("确认收货成功")
              this.reload()
            }else{
              this.$message.error(data.msg)
            }
          }
          this.api.internalOrderConfirm(parm,succ)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });
        });
      },
      del(id){
        this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let parm={
            id:id
          }
          let succ=data=>{
            if(data.code=="OK"){
              this.$message.success("删除成功")
              this.reload()
            }else{
              this.$message.error(data.msg)
            }
          }
          this.api.internalOrderDelete(parm,succ)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //发货单导出
      exportInvoices(){
        for(var i in this.orderTime){
          this.startTime = this.orderTime[0];
          this.endTime = this.orderTime[1];
        }
        this.$confirm('此操作导出发货单,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //优化
          let loadingInstance = Loading.service({ fullscreen: true,text:'正在导出中，请稍后..' });
          axios({
            method:'post',
            url: '/api/erp/v1/internal/order/delivery/download',
            responseType: 'blob',
            timeout:1000 * 60 * 10,
          }).then(res => {
            if(res.status == "200"){
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
              });
              const link = document.createElement('a')
              let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
              link.style.display = 'none'
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '非平台订单发货单' + '.xlsx')
              // this.$loading.hide()
              document.body.appendChild(link)
              link.click()
              document.body.removeChild(link)
              this.reload()
            }else{
              this.$message.error("数据错误")
              this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
              });
            }
          }).catch(error => {
            this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
              loadingInstance.close();
            });
          })
        });
      },
      //导入订单
      query(){
        let parmas=this.ruleForm
        parmas['pageIndex']=1
        parmas['pageSize']=10
        let success=data=>{
          if(data.code=='OK'){
            this.nonPlatformList=data.data
            // this.tableParams.dataArray=data.data
            // data.data.forEach(item=>{
            //
            // })
            this.pageCount=data.pageCount
          }else{
            this.$message.error(data.msg)
          }
        }
        api.internalOrderList(parmas,success)
      },
      //重置
      reset(){
       this.ruleForm={}
      },
      //查看订单
      lookOrder(id){
        this.$router.push({
          path:'/order-query-detail',
          query:{
            id:id
          }
        })

      },
      handleCurrentChange(val) {
        let parmas=this.ruleForm
        parmas['pageIndex']=val
        parmas['pageSize']=10
        let success=data=>{
          if(data.code=='OK'){
            this.nonPlatformList= data.data
          }else{
            this.$message.error(data.msg)
          }
        }
        api.internalOrderList(parmas,success)
      }
    },
    components:{
      importInvoice,importBill,SplitVertical,VTable,expressMethods
    }
  }
</script>
<style lang="scss" scoped>
  .orderPlatFormContainer{
    .main-containerText {
      background: #fff;
      height: auto;
      padding: 3px 0;
      .el-form-item{
        margin-bottom: 10px!important;
        .el-input {
          width: 96%;
        }
        .el-select {
          width: 96%;
        }
      }
    }
    .selectDate{
      background: #fff;
      display: flex;
      width:100%;
      flex-direction: row;
      box-sizing: border-box;
      flex-wrap: wrap;
        .block{
          margin-top:12px;
          // flex:1;
          span{
            width:90px;
            text-align: center;
            display: inline-block;
            color:#606266;
            font-size:15px;
          }
          label{
            width:90px;
            text-align: center;
            display: inline-block;
            color:#606266;
            font-size:15px;
          }
          .import{
            background:#fff;
            position: relative;
            display: inline-block;
              .blueButton{
                position: absolute;
                display: inline-block;
                width: 97px;
                height: 34px;
                line-height:32px;
                // background-color: #4ae2ef;
                border:1px solid #DCDFE6;
                color: #606266;
                text-decoration: none;
                text-align: center;
                font: normal normal normal 16px/33px 'Microsoft YaHei';
                cursor: pointer;
                border-radius: 4px;
                top: -23px;
                left: 14px;
                font-size:14px;
              }
              button{
                width:70px;
                height:39px;
                border-radius: 5px;
                background:#fff;
                border:1px solid #d4d4d4;
                cursor: pointer;
              }
              input{
                position: absolute;
                top:-25px;
                display: block;
                width: 100px;
                height: 40px;
                opacity: 0;
                left:14px;
                cursor: pointer;
              }
            }
          }
        }

    .pagination{
      padding: 10px 0;
      text-align: right;
    }
    .upload-demo{
      padding:0 10px;
    }
    .orderTable{
      margin:0 10px;
    }
  }
</style>
